<template>
  <view class="container">
    <video
      ref="video"
      src="/static/conent/cec8f1f5a74d15b8ec6caf3d489ec87a.mp4"
      @play="onVideoPlay"
      @pause="onVideoPause"
      @click="toggleVideo"
    />
  </view>
</template>

<script>
export default {
  methods: {
    onVideoPlay() {
      console.log("视频开始播放");
    },
    onVideoPause() {
      console.log("视频暂停播放");
    },
    toggleVideo() {
      const video = this.$refs.video;
      if (video.paused) {
        video.play();
      } else {
        video.pause();
      }
    },
  },
};
</script>

<style lang="scss">
.container {
  width: 100%;
  video {
    width: 100%;
    height: 100vh;
  }
}
</style>
